<template>
    <div class="home">
        <div style="width: 20%">
            <a href="/" > <img style="width: 100px;" src="../../static/title.png"/></a>
        </div>

        <div style="width: 60%">
            <div> <el-button @click="goLogin" type="text" style="float: right"><span>已有账号，</span>立即登录</el-button></div>

        </div>

    </div>

    <div class="sign" :style="signStyle">
            <el-form :rules="rules" ref="formSign" :model="form"  >
                <h3 class="loginTitle">用户注册</h3>
                <el-form-item prop="name">
                    <el-input type="text" placeholder="请输入用户名" v-model="form.username" ></el-input>
                </el-form-item>
                <el-form-item prop="name">
                    <el-input type="text" placeholder="请输入昵称" v-model="form.name" ></el-input>
                </el-form-item>
                <el-form-item prop="name">
                    <el-input type="text" placeholder="请输入手机号" v-model="form.phone" ></el-input>
                </el-form-item>
                <el-form-item prop="name">
                    <el-input type="text" placeholder="请输入邮箱" v-model="form.mail" ></el-input>
                </el-form-item>
                <el-form-item prop="name">
                    <el-input style="width: 65%;" type="text" :placeholder="content"   v-model="form.code" ></el-input>
                    <el-button id="img" style="width: 35%;" alt="验证码" @click="_getCheckCode"  :loading="loadCode">{{buttonName}}</el-button>
                </el-form-item>
<!--                <el-form-item >-->
<!--                    <el-input type="text" style="width: 80%;" :placeholder="content" v-model="form.code"></el-input>-->
<!--                    <img id="img" style="width: 20%;height: 36px;margin-bottom: -14px" alt="验证码" @click="_verificationCode" :src="captchaUrl" />-->
<!--                </el-form-item>-->
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
                </el-form-item>

                <el-button type="primary" style="width: 100%" @click="signUp('formSign')">注册</el-button>

            </el-form>
    </div>
</template>

<script>
    import {getCookie, postReq} from "../utils/api";

    export default {
        mounted() {
          // this._verificationCode()
            if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
                this.signStyle='width: 88%;margin-top: 100px;'
            }
        },
        name: "SignUp",
        data(){
            return{
                signStyle:'width: 30%;margin-top: 100px;',
                captchaUrl:'',
                timer: null,
                buttonName:'获取验证码',
                content: '请输入验证码',
                loadCode:false,
                form:{
                    username:'',
                    name:'',
                    mail:'',
                    phone:'',
                    password:'',
                    code:'',
                    codeCheck:''
                },
                rules:{
                    username: [
                        { required: true, message: '请填写用户名', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请填写昵称', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写用户名密码', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: '请填写邮箱', trigger: 'blur' }
                    ]

                }
            }
        },methods:{
            _verificationCode() {
                postReq("/api/sys_user/captcha",{}).then(response => {
                    this.countDown()
                    console.log((response.data.data.url))
                    console.log(decodeURI(response.data.data.url))
                    this.captchaUrl = 'data:image/png;base64,' + decodeURI(response.data.data.url)
                    this.form.codeCheck = response.data.data.code
                    this.toLoginFlag=true
                }).catch(err => {
                    console.log(err);
                })
            },
            goLogin(){
                this.$router.push('/login')
            },
            signUp(formName){
                this.$refs[formName].validate((valid) => {

                    if (valid) {
                        postReq('/api/sys_user/register',this.form).then(res=>{

                            console.log(res)
                            if (res.data.data){
                                this.$message({
                                    message: '注册成功！',
                                    type: 'success'
                                });
                            }else{
                                this.$message({
                                    message: res.data.message,
                                    type: 'warning'
                                });
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            _getCheckCode(){
                 if (this.form.mail===undefined||this.form.mail===''){
                     this.$message({
                         message: '邮箱不能为空！',
                         type: 'warning'
                     });
                     return false
                 }
                this.loadCode=true
                this.buttonName='重新获取'


                 postReq('/api/sys_user/get_check_code?mail='+this.form.mail).then(res=>{
                   if (res.data.data){
                         this.loadCode=false
                         this.countDown()
                     }
                 })
            },
            countDown() {
                clearInterval(this.timer);
                this.timer=null
                const timerFor=1000
                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.timer = setInterval(() => {
                        if (this.count > 1 && this.count <= TIME_COUNT) {
                            this.count--;
                            this.content = '验证码失效时间 ' + this.count + ' s'
                        } else {
                            this.content = '验证码已失效请重新获取'
                            clearInterval(this.timer);
                            this.timer = null;
                            this.buttonName='获取验证码'

                        }
                    }, timerFor)
                }

            },
        }
    }
</script>

<style scoped>
    .home{
        width: 100%;
        text-align: center;
        vertical-align: center;
        position: fixed; top: 0px; left: 0px; z-index: 9999; width: 100%;
        font-size: .75em;    color: #333;
        background: #fff;

        height: 45px;
        display: flex;
        align-items: center;
        box-shadow: 0 5px 4px 0 rgba(0,0,0,.05);
    }
.sign{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 0 auto;

    padding: 15px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}



</style>